:root {
    /* 浜壊 */
    --color-dark: #c9c9c9;
    /* 鏆楄壊 */
    --color-light: #000000;
    /**
     * Brand Color
     */
    /* 涓婚鑹� */
    --color-primary: #FF0200;
    --color-primary-light-2: color-mix(in srgb, var(--color-primary) 80%, var(--color-light));
    --color-primary-dark-2: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
    --color-primary-light-3: color-mix(in srgb, var(--color-primary) 70%, var(--color-light));
    --color-primary-dark-3: color-mix(in srgb, var(--color-primary) 70%, var(--color-dark));
    --color-primary-light-4: color-mix(in srgb, var(--color-primary) 60%, var(--color-light));
    --color-primary-dark-4: color-mix(in srgb, var(--color-primary) 60%, var(--color-dark));
    --color-primary-light-5: color-mix(in srgb, var(--color-primary) 50%, var(--color-light));
    --color-primary-dark-5: color-mix(in srgb, var(--color-primary) 50%, var(--color-dark));
    --color-primary-light-6: color-mix(in srgb, var(--color-primary) 40%, var(--color-light));
    --color-primary-dark-6: color-mix(in srgb, var(--color-primary) 40%, var(--color-dark));
    --color-primary-light-7: color-mix(in srgb, var(--color-primary) 30%, var(--color-light));
    --color-primary-dark-7: color-mix(in srgb, var(--color-primary) 30%, var(--color-dark));
    --color-primary-light-8: color-mix(in srgb, var(--color-primary) 20%, var(--color-light));
    --color-primary-dark-8: color-mix(in srgb, var(--color-primary) 20%, var(--color-dark));
    --color-primary-light-9: color-mix(in srgb, var(--color-primary) 10%, var(--color-light));
    --color-primary-dark-9: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark));

    /* 淇℃伅棰滆壊 */
    --color-info: #6F777C;
    --color-info-light-2: color-mix(in srgb, var(--color-info) 80%, var(--color-light));
    --color-info-dark-2: color-mix(in srgb, var(--color-info) 80%, var(--color-dark));
    --color-info-light-3: color-mix(in srgb, var(--color-info) 70%, var(--color-light));
    --color-info-dark-3: color-mix(in srgb, var(--color-info) 70%, var(--color-dark));
    --color-info-light-4: color-mix(in srgb, var(--color-info) 60%, var(--color-light));
    --color-info-dark-4: color-mix(in srgb, var(--color-info) 60%, var(--color-dark));
    --color-info-light-5: color-mix(in srgb, var(--color-info) 50%, var(--color-light));
    --color-info-dark-5: color-mix(in srgb, var(--color-info) 50%, var(--color-dark));
    --color-info-light-6: color-mix(in srgb, var(--color-info) 40%, var(--color-light));
    --color-info-dark-6: color-mix(in srgb, var(--color-info) 40%, var(--color-dark));
    --color-info-light-7: color-mix(in srgb, var(--color-info) 30%, var(--color-light));
    --color-info-dark-7: color-mix(in srgb, var(--color-info) 30%, var(--color-dark));
    --color-info-light-8: color-mix(in srgb, var(--color-info) 20%, var(--color-light));
    --color-info-dark-8: color-mix(in srgb, var(--color-info) 20%, var(--color-dark));
    --color-info-light-9: color-mix(in srgb, var(--color-info) 10%, var(--color-light));
    --color-info-dark-9: color-mix(in srgb, var(--color-info) 10%, var(--color-dark));
    /**
     * Font Color
     */
    /* 涓昏鏂囧瓧棰滆壊 */
    --color-text-primary: #FFFFFF;
    /* 甯歌鏂囧瓧棰滆壊 */
    --color-text-regular: color-mix(in srgb, var(--color-text-primary) 80%, var(--color-light));
    /* 娆¤鏂囧瓧棰滆壊 */
    --color-text-secondary: color-mix(in srgb, var(--color-text-primary) 60%, var(--color-light));
    /* 鍗犱綅鏂囧瓧棰滆壊 */
    --color-text-placeholder: color-mix(in srgb, var(--color-text-primary) 50%, var(--color-light));
    /**
     * Background Color
     */
    /* 鑳屾櫙鑹� */
    --color-background: #222F39;
    /* 鍐呭鑳屾櫙鑹� */
    --color-background-base: #293641;
    /* 鑳屾櫙鐧借壊 */
    --color-background-white: #293641;
    /* 鑳屾櫙榛戣壊 */
    --color-background-black: #373f48;
}
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    object-fit: contain;
}
h1 {
    font-size: 40px;
    line-height: 62px;
}
h2 {
    font-size: 34px;
    line-height: 46px;
}
h3 {
    font-size: 28px;
    line-height: 38px;
    margin-top: 30px;
    margin-bottom: 20px;
}
h4 {
    font-size: 24px;
    line-height: 32px;
}
h5 {
    font-size: 18px;
    line-height: 24px;
}
h6 {
    font-size: 12px;
    line-height: 16px;
}

.segment {width: auto;height: fit-content;color: var(--color-text-primary);box-sizing: content-box;}
.segment * {transition: none;box-sizing: inherit;}

.sticky_header {background-color: var(--color-background);position: sticky;top: 68px;box-shadow: 0px 7px 5px -5px var(--color-background);z-index: 1;}
.tabs {--tabs-height: 34px;}
.tabs {position: relative;width: 100%;height: fit-content;padding: 12px 0;overflow: hidden;height: var(--tabs-height);background-color: var(--color-background);cursor: ew-resize;}
.tabs>.tabs_wrapper {position: absolute;left: 0;width: fit-content;display: flex;height: var(--tabs-height);line-height: var(--tabs-height);transition: none;}
.tabs>.tabs_wrapper .tabs_item {background-color: var(--color-info);color: var(--color-light);border-radius: 5px;padding: 0 20px;white-space: nowrap;user-select: none;cursor: pointer;}
.tabs>.tabs_wrapper .tabs_item.is_active {background-color: var(--color-primary);color: var(--color-text-primary);}
.tabs>.tabs_wrapper .tabs_item:not(:last-child) {margin-right: 10px;}

.date_group {width: 100%;height: fit-content;margin-top: 20px;display: flex;align-items: center;background-color: var(--color-background-white);border-top-left-radius: 5px;border-top-right-radius: 5px;}
.date {position: relative;width: calc(100% - 120px);height: 60px;overflow: hidden;}
.date_prev,.date_next {color: var(--color-text-placeholder);fill: currentColor;font-size: 30px;margin: auto;user-select: none;cursor: pointer;}
.date_prev:hover,.date_next:hover {color: var(--color-text-secondary);fill: currentColor;}
.date>.date_wrapper {position: absolute;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;width: fit-content;min-width: 100%;height: 100%;transition: none;}
.date>.date_wrapper .date_item {width: 120px;height: calc(100% - 10px);display: flex;flex-direction: column;justify-content: center;align-items: center;flex-shrink: 0;padding: 0 10px;margin-left: auto;margin-right: auto;border-radius: 5px;text-align: center;user-select: none;cursor: pointer;}
.date>.date_wrapper .date_item.is_active {background-color: var(--color-background-black);color: var(--color-primary);font-weight: bold;}
.date>.date_wrapper .date_item * {pointer-events: none;}

.list {width: 100%;height: fit-content;}
.list>.list_wrapper {width: 100%;padding: 0 38px;box-sizing: border-box;height: fit-content;background-color: var(--color-background-white);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;overflow: hidden;}
.list>.list_wrapper .list_item {width: 100%;height: 60px;box-sizing: border-box;padding: 10px 15px;display: flex;font-size: 14px;content-visibility: auto;contain-intrinsic-size: auto 60px;}
.list>.list_wrapper .list_item:not(:last-child) {box-shadow: inset 0px -1px 0px 0px var(--color-text-placeholder);}
.list>.list_wrapper .list_item.is_top:before {content: "";display: block;height: 60px;position: absolute;inset: 1px 0px;background: linear-gradient(to right, #ff00001a, var(--color-background-base) 75%);z-index: -1;}
.list>.list_wrapper .list_item>.info_left {height: 100%;min-width: 180px;display: flex;justify-content: flex-start;align-items: center;overflow: hidden;}
.list>.list_wrapper .list_item>.info_center {height: 100%;width: calc(60% - 20px);margin: 0 10px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.list>.list_wrapper .list_item>.info_right {height: 100%;flex:1;display: flex;justify-content: flex-end;align-items: center;overflow: hidden;}
.list>.list_wrapper .list_item>.info_left>img {margin-right: 10px;}
.list>.list_wrapper .list_item>.info_left>.left_title {max-width: calc(100% - 100px);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.list>.list_wrapper .list_item>.info_left>.left_time {max-width: 50px;margin-left: 10px;}
.list>.list_wrapper .list_item>.info_center>.team {display: flex;flex:1;flex-basis: 0; min-width: 0; align-items: center;column-gap: 10px;}
.list>.list_wrapper .list_item>.info_center>.team span {white-space: nowrap;flex:1;overflow: hidden;text-overflow: ellipsis;font-weight: bold;}
.list>.list_wrapper .list_item>.info_center>.team.home span:nth-child(1) {text-align: right;}
.list>.list_wrapper .list_item>.info_center>.team.home {justify-content: flex-end;}
.list>.list_wrapper .list_item>.info_center>.team.away {justify-content: flex-start;}
.list>.list_wrapper .list_item>.info_center>.score {display: flex;max-width: 214px;flex-shrink: 0;justify-content: center;white-space: nowrap;}
.list>.list_wrapper .list_item>.info_center>.score span {padding: 0 15px;font-size: 18px;}
.list>.list_wrapper .list_item>.info_center>.score em {display: block;width: 100%;font-style: normal;color: var(--color-text-primary);font-size: 10px;}
.list>.list_wrapper .list_item>.info_center>.score .staute {display: block;text-align: center;font-size: 14px;width: 90px;overflow: hidden;text-overflow: ellipsis;}
.list>.list_wrapper .list_item>.info_right>.btn_info {width: fit-content;padding: 0 6px;height: 32px;border-radius: 5px;display: flex;justify-content: center;align-items: center;column-gap: 6px;}
.list>.list_wrapper .list_group {width: 100%;height: fit-content;}
.list>.list_wrapper .list_group .list_item:not(:last-child) {box-shadow: inset 0px -0.5px 0px 0px var(--color-text-placeholder);}
.list>.list_wrapper:empty {position: relative;height: 240px;background-image: url('/{{ .site.TemplatePath }}/resource/images/empty2.svg');background-size: 180px;background-position: center top;background-repeat: no-repeat;}
.list>.list_wrapper:empty::before {display: block;position: absolute;left: 0;right: 0;bottom: 42px;content: "鏆傛棤璧涗簨";text-align: center;font-size: 18px;color: var(--color-text-regular);font-weight: bold;}
.list>.list_wrapper:empty::after {display: block;position: absolute;left: 0;right: 0;bottom: 20px;content: "鐪嬬湅鍏朵粬姣旇禌鍚�";text-align: center;font-size: 12px;color: var(--color-text-placeholder);}
.list .more_load {line-height: 40px;height: 40px;padding: 10px 38px 5px;width: calc(100% - 76px);margin-top: -5px;text-align: center;background-color: var(--color-background-base);border-radius: var(--border-radius);cursor: pointer;}
.list .more_load>* {background-color: var(--color-background);}